<template>
<div class="dialog_box" @click="closeFun">
    <div class="detail_cont" @click.stop="">
    <div class="tit_cont">
        <div class="info_cont">
            <p class="title">英语水平专业测试报告</p>
            <p class="text">English Proficiency Professional Test Report</p>
            <p class="name">{{ info.user && info.user.name || '' }}<span class="sex">{{ info.user && info.user.gender || '' }}</span>{{ info.createdTime }}</p>
        </div>
    </div>
    <div class="item_box">
        <p class="name1">{{ info.user && info.user.name || '' }}，你好！你的词汇量为</p>
        <p class="name2"><span class="num">{{ info.words }}</span><span>{{ info.rule && info.rule.name }}{{ info.rule && info.rule.level }}水平</span> </p>
    </div>
    <div class="item_box" v-if="ruleList.length>0" style="padding: 2.4rem 12rem;">
        <div class="intro_tit">
            <img src="@/assets/img/dd.png" alt="" srcset="">
            <span class="label">各年级英语水平划分表</span>
            <img src="@/assets/img/dd.png" alt="" srcset="">
        </div>
        <!-- <div id="echartsShape"></div>0 -->
        <div class="echart_box">

            <div class="border top1"></div>
            
            <div class="echart_item flex_center_center" style="margin-left: 3rem;">
                <img class="img1" src="@/assets/charts/11.png" alt="" srcset="">
                <div class="text1 flex_center_center" style="bottom:3rem ;">
                    <span class="font16">level</span>
                    <span class="font24 bold">A</span>
                </div>
                <div class="label">{{ ruleList[0].name || '小学' }}</div>
             </div>
             
            <div class="border top2"></div>

             <div class="echart_item flex_center_center">
                <img class="img2" src="@/assets/charts/22.png" alt="" srcset="">
                <div class="text1 flex_center_center" style="bottom:9rem ;">
                    <span class="font16">level</span>
                    <span class="font24 bold">B</span>
                </div>
                <div class="label">{{ ruleList[1].name || '初中' }}</div>
             </div>

            <div class="border top3"></div>

             <div class="echart_item flex_center_center">
                <img class="img3" src="@/assets/charts/33.png" alt="" srcset="">
                <div class="text1 flex_center_center" style="bottom:15rem ;">
                    <span class="font16">level</span>
                    <span class="font24 bold">C</span>
                </div>
                <div class="label">{{ ruleList[2].name || '高中' }}</div>
             </div>

             <div class="border top4"></div>

             <div class="echart_item flex_center_center">
                <img class="img4" src="@/assets/charts/44.png" alt="" srcset="">
                <div class="text1 flex_center_center"  style="bottom:19rem ;">
                    <span class="font16">level</span>
                    <span class="font24 bold">D</span>
                </div>
                <div class="label">{{ ruleList[3].name || '托福雅思' }}</div>
             </div>
             <div class="echart_item1">
                <div class="number" style="top:2rem">{{ ruleList[3].minimumNumber || 0 }} </div>
                <div class="number" style="top:8rem">{{ ruleList[2].minimumNumber || 0 }}</div>
                <div class="number" style="top:14rem">{{ ruleList[1].minimumNumber || 0 }}</div>
                <div class="number" style="top:20rem">{{ ruleList[0].minimumNumber || 0 }}</div>
                <div class="label"></div>

             </div>
        </div>
    </div>
    <div class="item_box" style="padding: 2.4rem 12rem;">
        <div class="intro_tit">
            <img src="@/assets/img/dd.png" alt="" srcset="">
            <span class="label">测评结果柱状对比图</span>
            <img src="@/assets/img/dd.png" alt="" srcset="">
        </div>
        <p class="echartsTitle flex_center_between" style="margin-top: 4rem;"><span>高中高级水平</span><span>{{ info.highSchoolRule.words || 3500 }}</span> </p>
        <el-progress :text-inside="true" :stroke-width="26" stroke-linecap="square" text-color="#019E69" color="#019E69" :percentage="info.highSchoolRule.words/8000*100||3500/8000*100"></el-progress>

        <p class="echartsTitle flex_center_between"><span>现实掌握词汇量</span><span>{{ info.words }}</span> </p>
        <el-progress :text-inside="true" :stroke-width="26" text-color="#F69B2C" color="#F69B2C" stroke-linecap="square" :percentage="info.words/8000*100"></el-progress>

    </div>
    <div class="item_box">
        <div class="intro_tit">
            <img src="@/assets/img/dd.png" alt="" srcset="">
            <span class="label">语言能力</span>
            <img src="@/assets/img/dd.png" alt="" srcset="">
        </div>
        <p class="content" v-html="info.rule && info.rule.languageAbility"></p>
    </div>
    <div class="item_box">
        <div class="intro_tit">
            <img src="@/assets/img/dd.png" alt="" srcset="">
            <span class="label">测评分析</span>
            <img src="@/assets/img/dd.png" alt="" srcset="">
        </div>
        <p class="content" v-html="info.rule && info.rule.evaluationAnalysis"></p>
    </div>
    <div class="item_box">
        <div class="intro_tit">
            <img src="@/assets/img/dd.png" alt="" srcset="">
            <span class="label">学习建议</span>
            <img src="@/assets/img/dd.png" alt="" srcset="">
        </div>
        <p class="content" v-html="info.rule && info.rule.learningAdvice"></p>
    </div>
    <div class="close cur" @click="closeFun">关闭</div>
    </div>
</div>
</template>
<script>
// import * as echarts from 'echarts';
export default {
    props: {
       isShow: {type: Boolean, default: false},
       info: {type: Object, default: {}}
    },
    data() {
        return {
            ruleList: [],
            option1 :{
                tooltip: {
                    show:true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['小学','初中','高中','托福雅思' ],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        max: 4000,
                        // maxInterval: 1000,
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'bar',
                        barWidth: '60%',
                        data: [
                            {
                                value: 240,
                                itemStyle: {
                                    color: '#FF5252',
                                }
                            },
                            {
                                value: 650,
                                itemStyle: {
                                    color: '#F69B2C',
                                }
                            },
                            {
                                value: 1760,
                                itemStyle: {
                                    color: '#40D463',
                                }
                            },
                            {
                                value: 3885,
                                itemStyle: {
                                    color: '#019E69',
                                }
                            }
                            
                        ]
                    }
                ]
            },
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        initData() {
            this.ruleList = this.info.ruleList
            // this.option1.series[0].data[1].value = this.info.words;
            // this.option1.series[0].data[0].value = this.info.highSchoolRule.words || 3500
            // this.$nextTick(()=>{
            //     const chartShape = document.getElementById('echartsShape');
            //     const myChartShape= echarts.init(chartShape);
            //     this.option1 && myChartShape.setOption(this.option1);
            // })
        },
        closeFun() {
            this.$emit('close')
        }
    }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

 ::v-deep .el-progress-bar__innerText{
    display: none;
}
.dialog_box{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    // overflow: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 5.0rem 0 12.0rem;
}
.detail_cont{
  width: 40%;
  // min-height: 80vh;
  // max-height: auto;
  background-image: url(@/assets/img/bj_4.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #F2F3F6;
  border-radius: 1.0rem;
  position: relative;
  padding: 7.8rem 3.5rem 4.0rem;
  margin: auto;
  .tit_cont{
    width: 100%;
    .info_cont{
      color: #FFFFFF;
      margin-bottom: 6.0rem;
      .title{
        font-size: 3.0rem;
        font-weight: bold;
      }
      .text{
        font-size: 1.8rem;
        margin: 1.9rem 0;
      }
      .name{
        font-size: 1.4rem;
        border-radius: 16.8rem;
        padding: 1.0rem 1.7rem;
        display: inline-block;
        background: rgba($color: #fff, $alpha: .2);
        .sex{
          margin: 0 .8rem;
        }
      }
    }
  }
  .head{
    width: 100%;
    // position: absolute;
    // top: -81rem;
    // z-index: 33;
    // margin-top: -81rem;
  }
  .item_box{
    border-radius: 1.0rem;
    background: #FFFFFF;
    padding: 2.4rem;
    text-align: center;
    margin-bottom: 1.6rem;
   .echartsTitle{
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.6rem;
   }
   .echart_box{
        // height: 24rem;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        position: relative;
        margin-top: 6rem;
        .border{
            position: absolute;
            width: 100%;
            border: 1px dashed #DADDE5;
        }
        
        .top1{top: 4rem;}
        .top2{top: 10rem;}
        .top3{top: 16rem;}
        .top4{top: 22rem;}
        .echart_item1{ 
            position: relative;height: 24rem;
            .number{
                position: absolute;
                font-size: 14px;
                color: #3A3F5E;
                text-align: left;
                background: #fff;
           }
        }
       .echart_item{
           position: relative;
           z-index: 1;
           .text1{
                position: absolute;
                color: #fff;
           }
           .label{margin-top: .5rem;}
           
           .img1{
                width: 7rem;
                height: 6rem;
           }
           .img2{
                width: 7rem;
                height: 12rem;
           }
           .img3{
                width: 7rem;
                height: 18rem;
           }
           .img4{
                width: 7rem;
                height: 22rem;
           }
        }

   }
    .echartsbox{
        position: relative;
        color: #fff;
        font-size: 1.6rem;
        .text1{
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .text2{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .numtag{
            width: 50%;
            text-align: right;
            color: #3A3F5E;
            font-size: 2.0rem;
            padding: .7rem;
            position: absolute;
            bottom: .6rem;
            right: 0;
        }
        .border{
            border-bottom: .1rem solid #019E69;
        }
        .border1{
            border-bottom: .1rem solid #40D463;
        }
        .border2{
            border-bottom: .1rem solid #F69B2C;
        }
        .border3{
            border-bottom: .1rem solid #FF5252;
        }
    }
    .name1{
      font-size: 2.2rem;
    }
    .name2{
      font-size: 4.0rem;
      font-weight: bold;
      color: #F69B2C;
      margin-top: 1.8rem;
    }
    .num{
      margin-right: 4.0rem;
    }
    .intro_tit{
      .label{
        margin: 0 2.4rem;
        color: #3A3F5E;
        font-size: 1.6rem;
      }
    }
    .content{
      color: #626780;
      font-size: 1.5rem;
      line-height: 3.0rem;
      margin-top: 1.5rem;
      text-align: left;
    }
  }
  .close{
    width: 26.8rem;
    height: 4.0rem;
    line-height: 4.0rem;
    color: #fff;
    border-radius: .4rem;
    opacity: 1;
    text-align: center;
    background: #019E69;
    position: absolute;
    bottom: -8.0rem;
    left: 50%;
    transform: translate(-50%);
  }
 }
 #echartsBox,#echartsShape{
  width: 100%;
  height: 40.0rem;
 }
</style>
